/* eslint-disable */
import Highcharts from 'highcharts';
import { toFixed } from '@/utils/validate';

export default {
  vueThis: null,
  highchartsDepth: null,
  chartsDepthData: {},
  tradCharts: null,
  init (options) {
    this.vueThis = options.self;
    const selfVue = this.vueThis;
    const self = this;
    const data = options.data;
    this.chartsDepthData = data;
    this.tradCharts = options.trad;
    const bgcolor = options.theme === 'black' ? '#152247' : '#fff';
    this.highchartsTheme.xAxis.lineColor = options.theme === 'black' ? '#7b8db9' : 'rgb(204, 214, 235)';
    this.highchartsTheme.xAxis.tickColor = options.theme === 'black' ? '#7b8db9' : 'rgb(204, 214, 235)';
    this.highchartsTheme.yAxis.lineColor = options.theme === 'black' ? '#7b8db9' : 'rgb(204, 214, 235)';
    this.highchartsTheme.yAxis.tickColor = options.theme === 'black' ? '#7b8db9' : 'rgb(204, 214, 235)';
    this.highchartsTheme.xAxis.labels.style.color = options.theme === 'black' ? '#7b8db9' : '#666';
    this.highchartsTheme.yAxis.labels.style.color = options.theme === 'black' ? '#7b8db9' : '#666';
    // 样式配置
    Highcharts.setOptions(this.highchartsTheme);
    // 深度实例化
    this.highchartsDepth = new Highcharts.chart('containerDepth', {
      chart: {
        type: 'area',
        backgroundColor: bgcolor,
        // renderTo: "chart_depth",
      },
      title:{
        text: null
      },
      subtitle: {
        text: ''
      },
      credits:{
        enabled: false,
      },
      legend:{
        enabled: false,
      },
      xAxis: {
        title: {
          enabled: false,
        },
        labels:{
          formatter: function() {
            return this.value
          },
        },
        tickmarkPlacement:'on'
      },
      yAxis: {
        title: {
          enabled: false,
        },
        minPadding:0,
        startOnTick:false,
        tickWidth: 1,
        gridLineWidth:0,
        labels: {
          formatter: function() {
            this.value = this.value >= 1000 ? this.value / 1000 + 'k' : this.value
            return this.value;
          }
        }
      },
      tooltip: {
        headerFormat:'',
        shared: !0,
        formatter: function() {
          try {
            const dep = self.chartsDepthData;
            const depthArr = dep.buy.concat(dep.sell);
            const arr = depthArr.find(v => v[0] === this.points[0].x);
            const html = '<b>'+selfVue.$t('tv.price')+'：'+ toFixed(this.points[0].x, self.tradCharts.priceDecimal) +' '+self.tradCharts.symbol2+'</b><br/>' +
                         '<b>'+selfVue.$t('tv.addQuantity')+'：'+ toFixed(this.points[0].y, self.tradCharts.coinDecimal) +' '+self.tradCharts.symbol1+'</b><br/>' +
                         '<b>'+selfVue.$t('tv.addMoney')+'：'+ toFixed(arr[2], 4) +' '+self.tradCharts.symbol2+'</b>';
            return html;
          } catch (error) {
            console.log(error);
          }
        } 
      },
      plotOptions: {
        area: {
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 4,
            states: {
              hover: {
                enabled: true
              }
            }
          }
        }
      },
      series: [{
        pointStart: 0,
        pointInterval: 2,
        data: [],
      },{
        pointStart: 0,
        pointInterval: 2,
        data:[]
      }]
    });
    this.highchartsDepth.series[0].setData(data.buy);
    this.highchartsDepth.series[1].setData(data.sell);
    this.highchartsDepth.redraw();
  },

  highChartsUpdate(options) {
    const data = options.data;
    this.chartsDepthData = data;
    this.tradCharts = options.trad;
    this.highchartsDepth.series[0].setData(data.buy, false, false, false);
    this.highchartsDepth.series[1].setData(data.sell, false, false, false);
    this.highchartsDepth.redraw();
  },

  highchartsTheme: {
    colors: ["RGBA(82, 177, 109, 0.25)", "RGBA(232, 18, 52, 0.15)"],
    chart: {
      // backgroundColor: "#000000",
      //borderColor: "#fff",
      //borderRadius: 0,
      //plotShadow: !0,
      //plotBorderWidth: 1,
      //height: '100%',
      // style: {
      //   plotBackgroundColor: '#000'
      // }
    },
    xAxis: {
      // gridLineWidth: 0,
      // lineColor: "#000",
      // tickColor: "#000",
      labels: {
        style: {
          // color: "#fff"
        }
      },
      title: {
        style: {
          // color: "#333"
        }
      }
    },
    yAxis: {
      // gridLineWidth: 0,
      // lineColor: "#000",
      // lineWidth: 1,
      // tickWidth: 1,
      labels: {
        style: {
          // color: "#000"
        }
      },
      title: {
        style: {
          // color: "#333"
        }
      }
    },
    plotOptions: {
      series: {
        fillOpacity: .2
      }
    }
  },
}